<template>
  <div class="rights">
    <!-- 1、面包屑导航  -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计 </el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- echarts 图 -->
      <div
        ref="mainRef"
        style="
          width: 100%;
          height: 700px;
          border: 1px solid #ddd;
          border-radius: 5px;
        "
      />
    </el-card>
  </div>
</template>

<script setup>
/*---------------------- 引入资源 ---------------------- */
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { error } from "@/utils/message";
import request from "@/utils/request";
import * as echarts from "echarts";
import lodash from "lodash";
/*---------------------- 定义变量 ---------------------- */
let options = reactive({
    title: {
      text: "用户来源",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#E9EEF3",
        },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
  }),
  mainRef = ref(),
  mycharts = null; // echarts 对象;
/*---------------------- 功能函数 ---------------------- */
async function initCharts() {
  let option = {
    url: "reports/type/1",
    type: "get",
  };
  try {
    let { data: res } = await request(option);
    if (res.meta.status !== 200) {
      return error(res.meta.msg);
    }
    //echarts 对象
    if (mycharts) {
      // 销毁对象
      mycharts.dispose();
    }
    let result = lodash.merge(options, res.data);
    mycharts = echarts.init(mainRef.value, "dark");
    mycharts.setOption(result);
  } catch (error) {
    console.log(error);
  }
}
/*---------------------- 生命周期函数 ---------------------- */
onMounted(() => {
  initCharts();
  // 当窗口缩放时，重新渲染echarts图标
  window.addEventListener("resize", initCharts, false);
});
// 当页面离开时执行的操
onUnmounted(() => {
  // 当页面离开时，移除事件绑定
  window.removeEventListener("resize", initCharts, false);
});
</script>

<style lang="scss" scoped>
.el-card {
  margin: 10px 0;
}
</style>